<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="jquery.min.js" type="text/javascript" charset="utf-8"></script>
		
		<script type="text/javascript">
			$(function(){
				//清空计算器
				$(".c").click(function(){
					$(".shang").val("");
					$(".xia").val("");
					$(".num1").val("");
					$(".num2").val("");
					$(".yun").val("");
					document.getElementsByClassName("shang")[0].setAttribute("placeholder","0");
					document.getElementsByClassName("xia")[0].setAttribute("placeholder","0");
				})
				
				var x=1;
				var y=1;
				
				//正则判断
				var zhi=/^[1-9]$|^\d\.?\d*$/;
				//输入数字
				$(".num").click(function(){
					if(x==1){
						//建立一个变量 获取被点击按钮的内容
						var i=this.innerHTML;
						var v=$(".xia").val();
						var val=v+i;
						
						var pd=zhi.test(val);
						if(pd){
							$(".xia").val(val);
							$(".num1").val(val);
						}else{
							
							document.getElementsByClassName("xia")[0].setAttribute("placeholder","数值错误请重新输入");
							
						}
					}else{
						if(y==1){
							var z=$(".xia").val();
							$(".shang").val(z);
							$(".xia").val("");
							y=0;
						}
						var i=this.innerHTML;
						var v=$(".xia").val();
						var val=v+i;
						var pd=zhi.test(val);
						if(pd){
							$(".xia").val(val);
							$(".num2").val(val);
						}else{
							document.getElementsByClassName("xia")[0].setAttribute("placeholder","数值错误请重新输入");
							
						}
					}
						
				})
				//输入运算符
				$(".yun").click(function(){
					var v=$(".num1").val();
					if(v){
						var ii=this.innerHTML;
						$(".yun").val(ii);
						x=0;
					}else{
						document.getElementsByClassName("xia")[0].setAttribute("placeholder","请输入第1个数");
					}
					
					
				})
				$(".deng").click(function(){
					$("form").submit();
				})
				
			})
			
		</script>
		
		
		<?php
			//建立函数 判断是否又数值
			$num1=isset($_POST["num1"])?$_POST["num1"]:0;
			$num2=isset($_POST["num2"])?$_POST["num2"]:0;
			$yun=isset($_POST["yun"])?$_POST["yun"]:0;
			
			switch($yun){
				case '/':
					if($num2){
						$jieguo=$num1/$num2;
						break;
					}else if($num2==0){
						$jieguo="被除数不能为0";
						break;
					}
					
				case '*':
					$jieguo=$num1*$num2;
					break;
				case '-':
					$jieguo=$num1-$num2;
					break;
				case '+':
					$jieguo=$num1+$num2;
					break;
			}
			$gc=$num1.$yun.$num2;
			if($num1==0&&$num2==0&&$yun==0){
				$jieguo=0;
				$gc=0;
			}
		?>
		
		
		
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			
			#box{
				width: 300px;
				height: 490px;
				border: 3px solid #C3C3C3;
				margin: 50px auto;
				background:url(11.jpg) no-repeat;
				border-radius: 10px;
				position: relative;
			}
			#box form{
				width: 260px;
				height: 80px;
				padding: 10px;
				border: 1px solid white;
				background: white;
				border-radius: 20px;
				margin: 15px auto;
			}
			#box form input{
				border: none;
				text-align: right;
			}
			#box form .shang{
				width: 100%;
				height: 34px;
				line-height: 34px;
				border-bottom: 1px solid #DADADA;
				font-size: 24px;
			}
			#box form .xia{
				width: 100%;
				height: 45px;
				line-height: 45px;
				font-size: 36px;
			}
			#box ul{
				width: 280px;
				height: 350px;
				margin:0 auto;
				display: flex;
				justify-content: space-around;
				align-content: space-between;
				flex-wrap: wrap;
			}
			#box ul li{
				width: 60px;
				height: 60px;
				text-align: center;
				font-size:28px;
				line-height: 60px;
				list-style: none;
				cursor:pointer;
				margin: 5px;
				border-radius: 50%;
				background:url(123.png) no-repeat 50% 50%;
				background-size: contain;
			}
			#box ul li.yun{
				color:blue;
			}
			#box ul li.num{
				color: firebrick;
			}
			#box ul li.deng{
				color: green;
			}
			
		</style>
			
	</head>
	<body>
		<div id="box">
			<form action="" method="post">
				<input type="text" name="shang" class="shang" value="" placeholder="<?php echo $gc; ?>"/>
				<input type="text" name="xia" class="xia" value="" placeholder="<?php echo $jieguo; ?>"/>
				<input type="hidden" name="num1" class="num1" value="" />
				<input type="hidden" name="num2" class="num2" value="" />
				<input type="hidden" name="yun" class="yun" value="" />
			</form>
			
			<ul>
				<li class="num">7</li>
				<li class="num">8</li>
				<li class="num">9</li>
				<li class="yun">+</li>
				
				<li class="num">4</li>
				<li class="num">5</li>
				<li class="num">6</li>
				<li class="yun">-</li>
				
				<li class="num">1</li>
				<li class="num">2</li>
				<li class="num">3</li>
				<li class="yun">*</li>
				
			
				<li class="c">c</li>
				<li class="num">0</li>
				<li class="num">.</li>
				<li class="yun">/</li>
				
				<li class="deng" style="width: 195px;height: 60px;background: url(111.jpg) no-repeat 50% 50%;background-size:contain;border-radius:60px;">=</li>
			</ul>
			
		</div>
	</body>
</html>
